<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS定位课后作业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #ededed;
        }
        
        .container {
            width: 1200px;
            height: 590px;
            background-color: rgb(255, 255, 255);
            position: relative;
            left: 300px;
            top: 100px;
        }
        
        .first {
            position: absolute;
            top: 80px;
            left: 260px;
            z-index: 1;
            box-shadow: 0px 0px 8px #999999;
        }
        
        .big {
            width: 300px;
            height: 210px;
            background-color: rgb(238, 208, 203);
            position: absolute;
            left: 400px;
            bottom: -40px;
            z-index: 2;
            box-shadow: 0px 0px 8px #999999;
            padding-left: 20px;
        }
        
        .big h3 {
            color: rgb(186, 138, 206);
            font-size: 15px;
            margin-top: 30px;
            text-align: center;
        }
        
        .big p {
            font-size: 12px;
            line-height: 20px;
            margin-top: 20px;
        }
        
        .L {
            width: 140px;
            height: 25px;
            border: 3px solid rgb(248, 187, 187);
            color: #000000;
            text-align: center;
            font-weight: bold;
            margin-top: 20px;
            font-size: 13px;
            display: block;
        }
        
        .H {
            width: 370px;
            height: 500px;
            background-color: rgb(38, 34, 55);
            position: absolute;
            right: 200px;
            top: -30px;
            color: rgb(204, 204, 204);
            padding-left: 40px;
            box-shadow: 0px 0px 8px #4c6619;
        }
        
        .H h2 {
            color: rgb(255, 255, 255);
            font-size: 15px;
            margin-left: 30px;
            margin-top: 110px;
            display: block;
        }
        
        .H p {
            font-size: 8px;
            line-height: 20px;
            margin-left: 30px;
            display: block;
            margin-top: 20px;
        }
        
        .U {
            width: 150px;
            height: 38px;
            color: rgb(152, 219, 207);
            background-color: rgb(128, 120, 151);
            text-align: center;
            font-weight: bolder;
            margin-top: 30px;
            margin-left: 30px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="first" src="http://via.placeholder.com/350x350" alt="">
        <div class="big">
            <h2>Experience</h2>
            <p>黄色的灿烂、辉煌，有着太阳般的光辉，<br>象征着照亮黑暗的智慧之光。黄色有着<br>金色的光芒，有象征着财富和权利，它<br>是骄傲的色彩。</p>
            <div class="L">
                <span>VIVO PORTFOLID</span>
            </div>
        </div>

        <div class="H">
            <h2>PHILOSOPHY</h2>
            <p>黄色在黑色和紫色的衬托下可以达到力量<br>的无限扩大，淡淡的粉红色也可以像少女<br>一样将黄色这骄傲的王子征服。黄色与绿<br>色相配，显得很有朝气，有活力；黄色与<br>蓝色相配，显得美丽、清新；淡黄色与深<br>黄色相配显得最为高雅。

            </p>
            <div class="U">
                <span>LEARN HTML</span>
            </div>
        </div>
    </div>
</body>

</html>